<template>
  <div class="home">
    <!-- vue中的$是Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来 -->
    <h3>当前值为{{ $store.state.count }}</h3>
    <p>我是直接从vuex中的getters中拿到的{{ $store.getters.listCount }}</p>
    <button @click="addcount">计数值+1</button>
    <button @click="addcountStep(3)">计数值+3</button>
    <button @click="reducecount(2)">计数值-2</button>
    <ul>
      <li v-for="item in $store.state.list" :key="item._id">
        {{ item.name }}<button @click="buyH">购买</button>
      </li>
    </ul>
    <button @click="load" v-show="isshowmore">加载数据</button>

    <!-- <img alt="Vue logo" src="../assets/logo.png" />
    <img src="../assets/xy.jpg" alt="" />
    <img :src="xy" alt />
    <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>

<script>
// @ is an alias to /src @是src的别名
// import HelloWorld from '@/components/HelloWorld.vue'
// 方式二引入图片文件
// import xx from '../assets/xy.jpg'
// 解构赋值引入vuex中的mapMutations
import { mapMutations } from 'vuex'
export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  data() {
    // 该写法是因为webpack中如果要引入资源文件，需要使用require或者import
    // 此处使用的是file-loader加载器
    // import引入的写法
    return {
      isshowmore: true
      // xy: require('../assets/xy.jpg')
      // xy: xx
      // 引入网络图片是可以直接引入的
      // szb:
      // 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2416142803,2306400110&fm=26&gp=0.jpg'
    }
  },
  methods: {
    // 将vuex根节点mutations中的buy映射到这个组件下
    ...mapMutations(['buy']),
    addcount() {
      // 在组件中通过commit提交可以触发一个mutation
      // mutation用来同步的改变数据
      // commit操作可以传两个参数type payload
      // 参数1：type表示mutation中的名字
      // 参数2：payload表示传递的参数
      // plus要和mutation中的方法名一致，表示触发的是
      // mutation中的plus方法
      this.$store.commit('plus')
    },
    addcountStep(buchang) {
      // buchang 接受的是点击时传的参数
      this.$store.commit('plus', buchang)
    },
    reducecount(buchang) {
      this.$store.commit('reducecount', buchang)
    },
    load() {
      // 注意初始在main.js中定义state的page和pages一样，如果判断条件写成<=则会造成点击时先判断条件为true点一下按钮就消失了数据也不会显示
      // 第一次点击时，page是全局定义的state的page的1，传给了action通过axios的params，请求的是第一页的数据，
      // 点击时页数page累加，后台拿到的总页数(比如是4)等于page时数据显示完了，再点就让按钮消失，比如说后台定的总页数为4，点了4下page等于4，再点一下page为5，按钮消失
      if (this.$store.state.pages < this.$store.state.page) {
        this.isshowmore = false
        return
      }
      // 通过dispatch派发一个Actions,action
      // 调取后台数据后通过commit触发mutations中
      // 的一个方法，改变数据后重新熏染页面
      // 参数二：拿到state中的page值（表示当前是第几页的数据），并传递给action中的loadData方法

      this.$store.dispatch('loadData', { page: this.$store.state.page })
    },
    buyH() {
      // this.$store.commit('buy')
      // 直接调用映射过来的buy即可
      this.buy()
    }
  }
}
</script>
